import React from 'react';
import Menu from '@/components/Common/Menu'
// 引入图标
import {
    FileOutline,
    HeartOutline,
    UserContactOutline,
    CouponOutline,
    FaceRecognitionOutline,
    UndoOutline,
    TeamOutline
} from 'antd-mobile-icons'
import '@/assets/css/user.css'

const Index = () => {
    // 退出
    const logout = async () => {
        var result = await React.UI.Dialog.confirm({
            content: '是否确认退出'
        })

        if (result) {
            // 删除cookie
            React.Cookie.remove('business')

            //跳转
            React.navigate('/business/login')
        }
    }

    return (
        <>
            {/* 头部 */}
            <div className="header">
                <div className="userinfo">
                    <div className="avatar">
                        <img src={React.Business.avatar_text} alt="" />
                    </div>
                    <div className="nickname">{React.Business.nickname ? React.Business.nickname : '匿名用户'}</div>
                </div>
                <div className="corrugated">
                    <div className="wave-top wave-item"></div>
                    <div className="wave-middle wave-item"></div>
                    <div className="wave-bottom wave-item"></div>
                </div>
            </div>
            <div className="menu-center">
                <div className="item">
                    <div>1</div>
                    <div className="text">支付</div>
                </div>
                <div className="item">
                    <div>10</div>
                    <div className="text">待支付</div>
                </div>
                <div className="item">
                    <div>7</div>
                    <div className="text">待评论</div>
                </div>
            </div>
            <div className="menu-cell">
                <div className="item">
                    <React.Router.Link to="/business/profile">
                        <UserContactOutline fontSize={24} />
                        <div className="title">个人资料</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <React.Router.Link to="/guest/index">
                        <TeamOutline fontSize={24} />
                        <div className="title">住客信息</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </React.Router.Link>
                </div>
                <div className="item">
                    <a href="order.html">
                        <FileOutline fontSize={24} />
                        <div className="title">房间订单</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </a>
                </div>
                <div className="item">
                    <a href="collect.html">
                        <HeartOutline fontSize={24} />
                        <div className="title">我的收藏</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </a>
                </div>
                <div className="item">
                    <a href="coupon.html">
                        <CouponOutline fontSize={24} />
                        <div className="title">我的优惠券</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </a>
                </div>
                <div className="item">
                    <a href="hotel-info.html">
                        <FaceRecognitionOutline fontSize={24} />
                        <div className="title">关于我们</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </a>
                </div>
                <div className="item">
                    <a onClick={logout}>
                        <UndoOutline fontSize={24} />
                        <div className="title">退出登陆</div>
                        <div className="icon">
                            <img src="/assets/images/right.png" alt="" />
                        </div>
                    </a>
                </div>
            </div>

            <Menu />
        </>
    )
}

export default Index